import { useEffect, useState } from "react"
import type { Type } from "../api/type/typeType"
import { reqGetAllTypes } from "../api/typeApi"
import { Button, Empty, Flex, message, Pagination } from "antd"
import { Title } from "../components/Content/title"
import type { ROOTSTATE } from "../Store"
import { useSelector } from "react-redux"
import { useNavigate } from "react-router"
import { reqGetIssueByPage } from "../api/issueApi"
import type { Issue as ISSUE } from "../api/type/issueType"
import { IssueCard } from "../components/IssueCard"


type PresetColors =
    | "blue"
    | "purple"
    | "cyan"
    | "green"
    | "magenta"
    | "pink"
    | "red"
    | "orange"
    | "yellow"
    | "volcano"
    | "geekblue"
    | "lime"
    | "gold"


export const Issue = () => {
    const typeList = useSelector((state: ROOTSTATE) => state.typeStore.typeList)
    const isLogin = useSelector((state: ROOTSTATE) => state.userStore.isLogin)
    const [messageAPI, contestHolder] = message.useMessage();
    const navigate = useNavigate()

    const gotoAddQ = () => {
        if (isLogin) {
            navigate("/editissue")
        } else {
            messageAPI.error("请登录")
        }
    }

    const [issueList,setIssueList] = useState<ISSUE[]>([])
    
    const [type,setType] = useState("all")

    //翻页相关数据
    const [currentPage,setCurrentPage] = useState(1);
    const [total,setTotal] = useState(0)
    const pageSize = 2;



    //获取当前页面展示Issue
    const getIssue = async ()=>{
        const res = await reqGetIssueByPage({
            page:1,
            size:5,
            searchValue: type !== "all" ? type : ""
        })
        setIssueList(res.data.list)
        setTotal(res.data.total)
        console.log(res); 
    }

   
    useEffect(()=>{
        getIssue()
    },[currentPage,type])
    return (
        <>
            <Flex vertical gap={30}>
                <Title title="问答模块">
                    <Flex gap={20}>
                        {[{ typename: "全部", _id: "all", color: "red" as PresetColors }, ...typeList].map(
                            (item, index) => (
                                <Button
                                    size="small"
                                    color={item.color}
                                    variant="solid"
                                    key={item._id}
                                    onClick={()=>{
                                        setType(item._id)
                                        setCurrentPage(1)
                                    }}
                                >
                                    {item.typename}
                                </Button>
                            )
                        )}
                    </Flex>
                </Title>

                <Flex gap={30} align="flex-start">
                    <Flex flex={3} vertical gap={20}>
                        {issueList.length > 0 ? (issueList.map((item)=>(
                            <IssueCard {...item} key={item._id}></IssueCard>
                        ))
                    ) : (
                        <Empty description="暂无相关数据"></Empty>
                    )
                }
                {/* 翻页组件 */}
                {issueList.length > 0 && (
                    <Pagination
                        current={currentPage}
                        pageSize={pageSize}
                        align="center"
                        defaultCurrent={1}
                        total={total}
                        onChange={(e) => setCurrentPage(e)}
                    >

                    </Pagination>
                )}
                    </Flex>
                    <Flex flex={1} vertical>
                        <Button type="primary" block onClick={gotoAddQ}>
                            我要提问
                        </Button>
                    </Flex>
                </Flex>
            </Flex>
            {contestHolder}
        </>
    )
}